<template>
      <div class="chessSquare" >
          <ChessCell
                v-for="(item,index) of cellArr"
                :key="index"
                :index="index"
                :val="item"
                :class="{ red: winnerLine.includes(index) }"
                @click-cell="clickCell"
          >
          </ChessCell>
      </div>
</template>

<script>
  import ChessCell from "@/components/ChessCell"
export default {
  name: "ChessSquare",
  components:{
      ChessCell
  },
  props: {
      cellArr:{
          type:Array,
          require: true
      },
      winnerLine:{
          type:Array
      }
  },
  methods:{
      clickCell(index){
          this.$emit("click-Square",index)
      }
  }
}
</script>

<style scoped>
    .chessSquare{
        display: flex;
        flex-wrap: wrap;
    }
    .red {
        background-color: #963473;
    }
</style>
